<template>
  <div id="question-details">
    <head-tabar></head-tabar>
    <div
      style="position:absolute;margin-top: 80px;width: 400px;border: 2px solid #b3b3b3;width: 800px;margin-left: 25%">
      <h2 style="color:#7b9e31;border-bottom: 1px solid #d6d6d6;padding: 10px;margin: 20px">题目详情</h2>
      <div style="margin-left: -5px;margin-right: 20px">
        <el-form ref="form" :model="this.details" label-width="80px">
          <el-form-item label="题目">
            <el-input v-model="details.questionTitle" disabled></el-input>
          </el-form-item>
          <el-form-item label="题目类型">
            <el-input v-model="details.questionSort.questionSortName" disabled></el-input>
          </el-form-item>
          <div v-if="this.changdu">
            <el-form-item label="选项">
              <el-input v-for="index in this.changdu" v-model="details.questionOption[index-1]" :key="index" disabled
                        style="margin-bottom: 10px"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="答案">
            <el-input v-for="index in this.changdu2" v-model="details.questionAnswer[index-1]" :key="index" disabled
                      style="margin-bottom: 10px"></el-input>
          </el-form-item>
          <el-form-item label="发题人">
            <el-input v-model="details.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="解析">
            <el-input v-model="details.questionResolve" disabled></el-input>
          </el-form-item>
          <el-form-item label="难易等级">
            <el-input v-model="details.questionHardLevel" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="returnUrl()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import HeadTabar from "../../components/HomeTaber/HeadTabar";

export default {
  name: "QuestionDetails",
  data() {
    return {
      details: {},
      changdu: '',
      changdu2: ''
    }
  },
  methods: {
    returnUrl() {
      this.$router.push('/Question')
    }
  },
  components: {
    HeadTabar
  },
  mounted() {
    axios('/question/details', {
      params: {
        questionId: localStorage.getItem('questionId')
      },
      method: 'get'
    }).then(res => {
      this.details = res.data.data
      if (this.details.questionOption != null)
        this.changdu = this.details.questionOption.length
      else
        this.changdu = 0
      this.changdu2 = this.details.questionAnswer.length
      console.log(this.details)
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>

</style>
